跳到主要内容

NPM 的使用与环境配置

概述​

安装 NodeJS​

参考资料 Linux nodejs 安装以及配置环境

wget https://nodejs.org/dist/v14.16.0/node-v14.16.0-linux-x64.tar.xz
tar zxvf node-v14.16.0-linux-x64.tar.xz

vim ~/.bashrc
export NODE_HOME=/usr/local/node/node-v14.16.0-linux-x64
export PATH=$NODE_HOME/bin:$PATH

source ~/.bashrc   # 使配置文件生效

有时需要配置一下软链

sudo ln -s /usr/local/node/node-v14.16.0-linux-x64/bin/node /usr/bin/node
sudo ln -s /usr/local/node/node-v14.16.0-linux-x64/bin/npm /usr/bin/npm
sudo ln -s /usr/local/node/node-v14.16.0-linux-x64/bin/npx /usr/bin/npx

什么是 NPM？​

Node包管理工具，类似Maven之于java 不过限于不可抗力的元素，国内挺难下载到npm的包 所以可以把npm的源更换成国内的源（就像Maven那样）

更新 NPM​

安装 NodeJS 就会自动装上这个 npm 安装好之后如果想要更新 npm（别忘了管理员权限）

# 同理，更新其他的包也是这样（后面的-g表示全局，如果不加则是作用于当前项目）
npm install npm@latest -g

NPM 使用国内镜像的方法​

### 方式一 ###
### 但是也有缺点，换成国内镜像源后，你不能再publish ，因为国内源只是一个拷贝库，不能提交。
### （但是对于只是使用和安装包来说，用不到publish。）
# 切换源
npm config set registry https://registry.npmmirror.com
# 验证命令 如果返回https://registry.npm.taobao.org，说明镜像配置成功。
npm config get registry
# 要恢复则改成
npm config set registry https://registry.npmjs.org


### 方式二，使用cnpm的方式 ###

### 此方法是用cnpm 命令把安装的包指向了淘宝npm镜像库，下载软件包会快很多。
### 但是还是有弊端的。只有使用cnpm安装npm包的时候才会指向淘宝镜像，很多npm包本身就依赖了很多其他包，
### 而且集成了npm install，在安装一个包的依赖包时，还会使用npm install ！！
### 这就导致了使用cnpm安装某个包，但是中途还会报错

# 安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 使用cnpm
cnpm install xxx

配置 NPM 的全局库​

全局库一般是用于一些工具，例如hexo

# 查看npm配置
npm config ls

其中 prefix 就是本地库的地址

所以直接改地址就好了

# 注意地址要改成双引号
npm config set prefix  "D:\NodeJSTools\node_global"
# 注意：环境变量也有一个本地库，那个本地库最好也改成一样的

# 检查一下
npm config ls

# 在cmd检查全局库是否改变全局库地址（Get-Command 是查看命令地址）
Get-Command hexo
# 如果是在Linux检查命令地址使用的是which

常用命令​

npm list # 打印出本地的包
npm public # 发布一个包到官方库里
npm unpublic # 删除一个已经发布的包
npm start # 默认是启动入口函数

具体使用​

如何初始化项目​

# 不加-y会有一堆需要设置的，例如包概述，包名之类的。使用-y就是直接使用默认的
# -y 就是--yes的缩写
npm init -y

寻找依赖​

npm库中心，类似于Maven的那个一样

安装依赖​

# 也可以直接使用简写 i ，但是这玩意删除好像有点问题，还是使用全称保险
# 例如安装vue
npm install vue

以安装jQuery为例，以前需要先去找到这个包的链接

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

现在直接

# 加个@后面就可以跟版本号了
npm install jquery@3.0.0

安装好之后就能在 node_modules 目录下找到相应的文件

N24tZ4.png

如果直接删掉 node_modules 目录也无所谓，因为依赖已经写在 package.json 文件里面了，这个文件类似 Maven 的 pom.xml 想要还原删掉的 node_modules 目录直接再

npm install

就可以了

package-lock 文件是什么？​

package.json 里面定义的是版本范围（比如^1.0.0），具体跑 npm install 的时候安的什么版本，要解析后才能决定，这里面定义的依赖关系树，可以称之为逻辑树（logical tree）。

node_modules 文件夹下才是 npm 实际安装的确定版本的东西，这里面的文件夹结构我们可以称之为物理树（physical tree）。安装过程中有一些去重算法，所以你会发现逻辑树结构和物理树结构不完全一样。

package-lock.json 可以理解成对结合了逻辑树和物理树的一个快照（snapshot），里面有明确的各依赖版本号，实际安装的结构，也有逻辑树的结构。其最大的好处就是能获得可重复的构建（repeatable build），当你在 CI（持续集成）上重复 build 的时候，得到的 artifact 是一样的，因为依赖的版本都被锁住了。

安装依赖到测试环境​

# 其中参数--save-dev的含义是代表把你的安装包信息写入package.json文件的devDependencies字段中
npm install xxx --save-dev

删除依赖​

npm uninstall jquery

更新依赖​

npm update jquery

自定义命令​

{
  "name": "studyvue",
  "version": "1.0.0",
  "description": "第一个Vue框架学习项目",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.5.1",
    "vue": "^2.6.11"
  }
}

可以看到一个 package.json 文件里面是这样的，其中 "scripts" 里面是可以自己去设置命令的

例如这里设置好的

"test": "echo \"Error: no test specified\" && exit 1"

可以直接修改，也可以自己添加一个命令

使用方法

# run 后面跟上自定的命令就好了
npm run test

打包项目​

TODO: 用到再更新...

复用全局包到本地项目​

TODO: 用到再更新...

npx 工具​

参考资料 npx 使用教程

npm 从 5.2 版开始，增加了 npx 命令

Node 自带 npx 模块，所以可以直接使用 npx 命令。万一不能用，就要手动安装一下。

npm install -g npx

调用项目安装的模块​

npx 想要解决的主要问题，就是调用项目内部安装的模块。比如，项目内部安装了测试工具 Mocha

npm install -D mocha

一般来说，调用 Mocha ，只能在项目脚本和 package.json 的 scripts 字段里面， 如果想在命令行下调用，必须像下面这样。

# 项目的根目录下执行
node-modules/.bin/mocha --version

npx 的原理很简单，就是运行的时候，会到 node_modules/.bin 路径和环境变量 $PATH 里面，检查命令是否存在。

由于 npx 会检查环境变量 $PATH，所以系统命令也可以调用。

# 等同于 ls
npx ls

注意，Bash 内置的命令不在 $PATH 里面，所以不能用。比如，cd 是 Bash 命令，因此就不能用 npx cd

避免全局安装模块​

除了调用项目内部模块，npx 还能避免全局安装的模块。比如，create-react-app 这个模块是全局安装，npx 可以运行它，而且不进行全局安装。

npx create-react-app my-react-app

上面代码运行时，npx 将 create-react-app 下载到一个临时目录，使用以后再删除。所以，以后再次执行上面的命令，会重新下载create-react-app。

下载全局模块时，npx 允许指定版本。

npx uglify-js@3.1.0 main.js -o ./dist/main.js

--no-install 参数和--ignore-existing 参数​

如果想让 npx 强制使用本地模块，不下载远程模块，可以使用 --no-install 参数。如果本地不存在该模块，就会报错。

npx --no-install http-server

反过来，如果忽略本地的同名模块，强制安装使用远程模块，可以使用 --ignore-existing 参数。比如，本地已经全局安装了 create-react-app，但还是想使用远程模块，就用这个参数。

npx --ignore-existing create-react-app my-react-app

使用不同版本的 node​

利用 npx 可以下载模块这个特点，可以指定某个版本的 Node 运行脚本。它的窍门就是使用 npm 的 node 模块。

npx node@0.12.8 -v
# v0.12.8

上面命令会使用 0.12.8 版本的 Node 执行脚本。原理是从 npm 下载这个版本的 node，使用后再删掉。

某些场景下，这个方法用来切换 Node 版本，要比 nvm 那样的版本管理器方便一些。

-p 参数​

-p 参数用于指定 npx 所要安装的模块，所以上一节的命令可以写成下面这样。

npx -p node@0.12.8 node -v
# v0.12.8

上面命令先指定安装 node@0.12.8，然后再执行 node -v 命令。

-p 参数对于需要安装多个模块的场景很有用。

npx -p lolcatjs -p cowsay [command]

-c 参数​

如果 npx 安装多个模块，默认情况下，所执行的命令之中，只有第一个可执行项会使用 npx 安装的模块，后面的可执行项还是会交给 Shell 解释。

$ npx -p lolcatjs -p cowsay 'cowsay hello | lolcatjs'
# 报错

上面代码中，cowsay hello | lolcatjs 执行时会报错，原因是第一项 cowsay 由 npx 解释，而第二项命令 lolcatjs 由 Shell 解释，但是 lolcatjs 并没有全局安装，所以报错。

-c 参数可以将所有命令都用 npx 解释。有了它，下面代码就可以正常执行了。

npx -p lolcatjs -p cowsay -c 'cowsay hello | lolcatjs'

-c 参数的另一个作用，是将环境变量带入所要执行的命令。举例来说，npm 提供当前项目的一些环境变量，可以用下面的命令查看。

$ npm run env | grep npm_

-c 参数可以把这些 npm 的环境变量带入 npx 命令。

$ npx -c 'echo "$npm_package_name"'

上面代码会输出当前项目的项目名。

问题​

-D 和 -S 的区别​

参考自

--save 和 --save-dev 下载标签它们的区别是

  • –save 会把依赖包名称添加到 package.json 文件 dependencies 键下
  • –save-dev 则添加到 package.json 文件 devDependencies 键下

即 dependencies 是运行时依赖，devDependencies 是开发时的依赖。

比如 我们安装 js 的压缩包 gulp-uglify 工具时，采用的是 npm install –save-dev gulp-uglify 命令安装，因为在发布后用不到它，而只是在我们开发才用到它。

dependencies 下的模块，则是我们发布后还需要依赖的模块，譬如像 jQuery 库或者 Angular 框架类似的，在开发完后后肯定还要依赖它们，否则就运行不了。

npx 创建项目时报错​

参考资料 npx创建项目时报错

在使用 npx 创建项目时报了如下错误：

以上错误的原因是因为 node_cache 的文件路径名中包含空格

可以使用 npm config list 命令查看这个配置

解决空格问题，只需修改下这个路径地址就行了（随便创建一个新路径）

npm config set cache "D:\\NodeJSTools\\node_cache"

参考资料​

npm 官网 npm 中文网